<template>
  <el-dialog
    top="30px"
    width="980px"
    append-to-body
    title="退费管理"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-form class="query-table-form">
      <el-form-item class="float-right">
        <el-button icon="el-icon-plus" @click="handleEdit()">退费</el-button>
      </el-form-item>
    </el-form>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
    <bond-flow
      :visible.sync="editVisible"
      :query-id="queryId"
      :table-id="editId"
      :register-id="tableId"
      @success="getData()"
    ></bond-flow>

    <el-dialog
      :visible.sync="detailVisible"
      :close-on-click-modal="false"
      append-to-body
      width="1000px"
      class="dialog-sm"
      top="30px"
    >
      <el-tabs>
        <el-tab-pane label="退费审批表">
          <refunds-view
            :view-mode="true"
            :query-id="queryId"
            :table-id="viewTableId"
          ></refunds-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <flow-dialog
      title="风险金退费审批流程"
      :visible.sync="flowVisible"
      flow-key="BACK_RISK_APPROVAL"
    ></flow-dialog>
  </el-dialog>
</template>

<script>
import bondFlow from '@/bigcredit/views/settle/risk/components/refunds/MainDialog'
import RefundsView from '@/bigcredit/views/settle/risk/components/refunds/Main'
import { mapGetters } from 'vuex'
import FlowDialog from '@/credit/components/flow/ViewDialog'
export default {
  components: {
    bondFlow,
    RefundsView,
    FlowDialog,
  },
  props: {
    visible: Boolean,
    queryId: String,
    tableId: String,
  },
  data() {
    return {
      tableName: 'pay_fee_record_view',
      params: {
        index: 1,
        size: 10,
      },
      tableData: [],
      totalCount: 0,
      order: {},
      tableColumns: [
        { attrs: { label: '客户名称', prop: 'customer_name', align: 'center' } },
        { attrs: { label: '地址', prop: 'address', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', width: '110px' } },
        {
          attrs: { label: '退费时间', prop: 'pay_time', align: 'center', width: '100px' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd'),
        },
        { attrs: { label: '退费金额(万元)', prop: 'pay_funds', align: 'center' } },
        {
          attrs: { label: '登记时间', prop: 'create_time', width: '100px' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd hh:mm'),
        },
        { attrs: { label: '待处理人', prop: 'task_person_name', align: 'center', fixed: 'right' } },
        {
          attrs: { label: '审批流程', align: 'center', width: 80, fixed: 'right' },
          operations: [{ content: '流程', icon: 'fa fa-sitemap', event: this.handleFlow }],
        },
        {
          attrs: { label: '操作', align: 'center', width: 100, fixed: 'right' },
          operations: [
            {
              content: '修改',
              icon: 'fa fa-edit',
              event: this.handleEdit,
              ifRender: row =>
                (+row.approval_status === 0 && row.submit_person === this.userId) ||
                row.task_person === this.userId,
            },

            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleDetail,
            },
          ],
        },
      ],
      loading: false,
      editVisible: false,
      editId: '',

      viewTableId: '',
      detailVisible: false,
      flowVisible: false,
    }
  },
  computed: {
    ...mapGetters(['userId']),
  },
  watch: {
    tableId: {
      handler: function () {
        this.params['related_id.eq'] = this.tableId
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleFlow() {
      this.flowVisible = true
    },
    getData() {
      this.tableData = []
      if (!this.tableId) {
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = data?.data ?? []
          this.totalCount = data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleDetail(row) {
      this.viewTableId = row ? row.id : ''
      this.detailVisible = true
    },
    handleEdit(row = {}) {
      this.editId = row?.id ?? ''
      this.editVisible = true
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
